<template>
	<view class=" main-bgH   ">

		<image mode="widthFix" style="width: 200rpx;height: auto;left: 50rpx;" class="abs" src="@/static/logo.png">
		</image>
		<view class="p-t-90 flex  fd-c ai-c">
			<image class="" style="width: 245rpx; " mode="widthFix"
				src="https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/hyxhl.png">

				<view class="fs-24 fw-400 p-t-20 l-s-2">
					选择关键词
				</view>

				<view class="w-100 p-t-50">
					<swiper class="swiper" @change="onSwiperChange" :indicator-dots="true" :autoplay="false"
						:interval="3000" :duration="1000">
						<swiper-item>
							<view class="swiper-item " style="padding: 0 20rpx;">
								<view class="rel w-100 h-100">
									<view v-for="(item, index) in list"
										:class="{ ['item' + index]: true, 'sel': index === Aikey }" class="abs item"
										@click="Aikeyclick" :data-index="index">
										<text>{{item}}</text>

									</view>
								</view>



							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">

								<view class="rel w-100 h-100">
									<view v-for="(item, index) in list2"
										:class="{ ['itemB' + index]: true, 'sel': index === Aikey2 }" class="abs item"
										@click="Aikey2click" :data-index="index">
										<text>{{item}}</text>

									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

				</view>

		</view>


		<view @click="sc"
			style="width: 322rpx;height: 67rpx; bottom: 10vh;border-radius: 7rpx; line-height: 67rpx;letter-spacing: 4rpx;"
			class="abs-x bg-fff" src="@/static/logo.png">生成海报</view>

		<FakeProgress :visible.sync="showProgress" :isDone="syntheticDone" @cancel="handleProgressCancel"
			@finishProgress="finishProgressRes">


			<text>请耐心稍等片刻<br /> 正在努力为您生成海报</text>
		</FakeProgress>

		<pop :visible.sync="popshow" :maskClickClose="true">

			<image :src="imgUrl" mode="widthFix" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd"></image>
			<view class="c-fff p-t-50">长按图片保存至手机并分享</view>
			<!-- 自定义分享按钮 -->
			<!-- <button class="share-btn m-t-20" @click="handleShare">去核销</button> -->

			<view v-if="checkInShow" @click="toH5"
				style="width: 322rpx;height: 67rpx; border-radius: 7rpx; line-height: 67rpx;letter-spacing: 4rpx;margin: 20rpx auto 0;"
				class=" bg-fff ">去核销</view>


		</pop>



	</view>
</template>

<script>
	const wx = require('jweixin-module');

	import FakeProgress from "@/components/FakeProgress.vue"
	import pop from "@/components/pop.vue"
	import {
		TrackOpTypes
	} from "vue";
	export default {
		components: {
			"FakeProgress": FakeProgress,
			"pop": pop,
		},
		data() {
			return {
				id: 0,
				currentIndex: 0,
				Aikey: 0,
				list: [
					'烨，冲鸭', '惊不惊喜，意不意外', '颜值炸裂', '勇敢烨烨，不怕困难', '带你C位出道', 'YYDS', '烨的光芒，太上头了！', '给生活比个耶', '绝绝子',
					'我有烨，你有freestyle吗？'
				],
				Aikey2: 0,
				list2: [
					'随时随地spa', '简约科技风', '车载BGM', '省心省力长寿匠', '风火轮驱动', '灯光秀', '安全守护神', '静止音境', '空间魔术师', '机甲美学'
				],
				keyText: "",


				showProgress: false,
				syntheticDone: false,

				// popshow: true,
				popshow: false,

				imgUrl: "",
				wxConfigLoaded: false,

				pressTimer: null,
				longPressDuration: 800, // 微信弹窗触发时间约800ms（需实测）

				checkInShow: false,
			}
		},
		onLoad(Option) {
			// let that = this
			// this.$wx.initJssdk(function(res) {

			// 	wx.ready(() => {
			// 		that.wxConfigLoaded = true;
			// 	});
			// })
			if (Option.id) {
				this.id = Option.id
			} else {
				uni.showModal({
					title: "出错了，请联系工作人员。id=" + this.id,
				})
			}
		},
		onShow() {
			if (uni.getStorageSync('checkIn')) {

				if (this.id == 1) {
					this.checkInShow = uni.getStorageSync('checkIn').pid.includes(132);
				}
				if (this.id == 2) {
					this.checkInShow = uni.getStorageSync('checkIn').pid.includes(133);
				}
			}
		},
		methods: {
			checkIn(){
				let param = {
					openid :uni.getStorageSync('openid')
				}
				this.$http.get('/TakePhoto/checkIn', param, res => {
					console.log(res)
				
					uni.setStorageSync('checkIn', res.data);
					
					if (this.id == 1) {
						this.checkInShow = uni.getStorageSync('checkIn').pid.includes(132);
					}
					if (this.id == 2) {
						this.checkInShow = uni.getStorageSync('checkIn').pid.includes(133);
					}
					
					
				})
			},
			toH5() {
				// 网页内跳转时携带参数
				window.location.href = 'https://lvboguan.artigit.com/static_web/ceshi/index.html?type='+this.id + '&user='+uni.getStorageSync('openid');
			},
			handleTouchStart() {
				this.pressTimer = setTimeout(() => {
					this.onLongPress();
				}, this.longPressDuration);
			},
			handleTouchEnd() {
				clearTimeout(this.pressTimer);
			},
			onLongPress() {
				// 用户长按了足够时间，可能触发微信弹窗
				// uni.showToast({
				// 	title: "检测到长按，微信弹窗可能已出现"
				// })
				console.log("检测到长按，微信弹窗可能已出现");

				let param = {
					user: uni.getStorageSync('openid'),
					type: this.id,
				}
				this.$http.get('/TakePhoto/getdaka', param, res => {
					console.log(res)
					
					this.checkIn()
				})


				// 这里可执行统计等逻辑
			},
			finishProgressRes() {
				// 进度条结束了

				this.popshow = true
				this.handleProgressCancel()
			},
			// 点击分享按钮触发
			handleShare() {
				if (!this.wxConfigLoaded) {
					uni.showToast({
						title: '加载中，请稍后',
						icon: 'none'
					});
					return;
				}

				// 设置分享给朋友的内容
				wx.updateAppMessageShareData({
					title: '好友，看看这个图片！', // 分享标题
					desc: '点击直达精彩内容', // 分享描述
					link: 'https://your-domain.com/pages/B/index?from=share', // 分享链接（页面B）
					imgUrl: 'https://your-domain.com/share-thumbnail.jpg', // 分享图标
					success: () => {
						console.log('朋友分享设置成功');
					}
				});

				// 设置分享到朋友圈的内容
				wx.updateTimelineShareData({
					title: '朋友圈分享标题', // 朋友圈只读标题
					link: 'https://your-domain.com/pages/B/index?from=share',
					imgUrl: 'https://your-domain.com/share-thumbnail.jpg',
					success: () => {
						console.log('朋友圈分享设置成功');
					}
				});

				// 提示用户操作（微信限制不能直接调起分享，需用户主动触发）
				uni.showModal({
					content: '请点击右上角菜单分享给好友或朋友圈',
					showCancel: false
				});
			},
			handleProgressCancel() {
				this.showProgress = false
				this.syntheticDone = false
			},
			// swiper 切换时触发的事件处理函数
			onSwiperChange(e) {
				// 获取当前显示的 item 索引
				this.currentIndex = e.detail.current;
				console.log('当前显示的 item 索引:', this.currentIndex);
			},
			Aikeyclick(e) {
				let {
					index
				} = e.currentTarget.dataset

				this.Aikey = index
			},
			Aikey2click(e) {
				let {
					index
				} = e.currentTarget.dataset

				this.Aikey2 = index
			},
			sc() {
				console.log(this)
				if (this.currentIndex == 0) {


					this.keyText = this.list[this.Aikey]

				} else if (this.currentIndex == 1) {

					this.keyText = this.list2[this.Aikey2]

				} else {
					uni.showModal({
						title: "出错了，请联系工作人员",
					})
					return
				}



				if (this.keyText) {
					console.log(this.keyText)
					this.showProgress = true
					let param = {
						keyword: this.keyText,
						carMode: this.id,
					}
					this.$http.get('/SynthesisPoster', param, res => {

						console.log(res)
						uni.hideLoading()
						if (res.code == 200) {


							this.syntheticDone = true

							this.imgUrl = res.data


						} else {
							uni.showToast({
								title: '请求失败！',
								icon: 'none'
							})


						}
					}, cdError => {
						uni.showToast({
							title: '请求失败！',
							icon: 'none'
						})
						this.handleProgressCancel()
					})






				} else {
					uni.showModal({
						title: "出错了，请联系工作人员",
					})
					return
				}

			},
		}
	}
</script>

<style>
	.main-bgH {
		width: 100%;
		height: 100%;
		padding: 5vh 50rpx 0;
		position: relative;
		/* 	background: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/bj2.png') center 65%/100% auto no-repeat; */
		background-image: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/bj2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.share-btn {
		width: 227rpx;
		height: 67rpx;
		line-height: 67rpx;
		background-color: #fff;
		color: #595757;
		border-radius: 0;
		border: 0 solid;
	}

	.swiper {
		width: 100%;
		height: 48vh;
		/* background-color: #fff; */
	}

	.item {
		font-size: 26rpx;
		/* padding: 10rpx 25rpx; */
		background: #E0E4E7;
		color: #989FA5;
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(41, 61, 96, 0.2);
		border-radius: 13rpx;
		/* letter-spacing: 2rpx; */
	}

	.sel {
		color: #989FA5;
		background: #293D60;
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(41, 61, 96, 0.2);
		border-radius: 13rpx;
		transform: scale(1.2);
		/* 放大1.2倍 */
		transition: transform 0.3s ease-in-out;
		/* 添加过渡效果 */
	}

	.item0 {
		left: 20rpx;
		top: 20rpx;
		width: 173rpx;
		height: 53rpx;
		line-height: 53rpx;
	}

	.item1 {
		width: 320rpx;
		height: 57rpx;
		line-height: 57rpx;
		left: 235rpx;
		top: 35rpx;
		font-size: 29rpx;
	}

	.item2 {
		font-size: 39rpx;
		width: 237rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 29rpx;
		top: 117rpx;
	}

	.item3 {
		width: 280rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 300rpx;
		top: 10vh;
		font-size: 24rpx;
	}

	.item4 {
		width: 222rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 20rpx;
		top: 15vh;
		font-size: 29rpx;
	}

	.item5 {
		width: 189rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 290rpx;
		top: 17vh;
		font-size: 39rpx;
	}

	.item6 {
		width: 295rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 20rpx;
		top: 23vh;
	}

	.item7 {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 335rpx;
		top: 26vh;
		font-size: 27rpx
	}

	.item8 {
		width: 187rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 120rpx;
		top: 30vh;
		font-size: 33rpx
	}

	.item9 {
		width: 383rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 80rpx;
		top: 36.5vh;
		font-size: 25rpx
	}


	.itemB0 {
		top: 20rpx;
		left: 20rpx;
		width: 173rpx;
		height: 53rpx;
		line-height: 53rpx;
	}

	.itemB1 {
		width: 320rpx;
		height: 57rpx;
		line-height: 57rpx;
		left: 235rpx;
		top: 40rpx;
		font-size: 29rpx;
	}

	.itemB2 {
		font-size: 39rpx;
		width: 237rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 29rpx;
		top: 117rpx;
	}

	.itemB3 {
		width: 280rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 300rpx;
		top: 10vh;
		font-size: 24rpx;
	}

	.itemB4 {
		width: 222rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 20rpx;
		top: 15vh;
		font-size: 29rpx;
	}

	.itemB5 {
		width: 189rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 290rpx;
		top: 17vh;
		font-size: 39rpx;
	}

	.itemB6 {
		width: 295rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 20rpx;
		top: 23vh;
	}

	.itemB7 {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 335rpx;
		top: 26vh;
		font-size: 27rpx
	}

	.itemB8 {
		width: 187rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 120rpx;
		top: 30vh;
		font-size: 33rpx
	}

	.itemB9 {
		width: 383rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 80rpx;
		top: 36.5vh;
		font-size: 25rpx
	}
</style>